<template>
    <view class="container">
        <!-- 行程信息头部 -->
        <view class="trip-header" v-if="false">
            <view class="route">
                <view class="route-left">
                    <text class="city">{{ detailsInfo.line.start.name }}</text>
                    <image src="/static/home/line.png" class="arrow-line-icon"></image>
                    <text class="city">{{ detailsInfo.line.end.name }}</text>
                </view>
            </view>
            <view class="divider"></view>
            <view class="owners-trip-item-detail">
                <view class="owners-departure-info">
                    <view class="time"><text class="start-label">出发</text> {{ detailsInfo.line.start_time }}</view>
                    <view class="contact">
                        <text class="label">余座：</text>
                        <text class="value">{{ detailsInfo.line.current_seats - detailsInfo.line.on_order }}</text>
                    </view>
                </view>
                <view class="trip-location-info">
                    <view>
                        <view class="departure">{{ detailsInfo.line.start_title }}</view>
                        <view class="location">
                            <image src="/static/home/line.png" class="arrow-line-icon rotate-element"></image>
                            <text class="label">途径：</text>{{ detailsInfo.line.approach }}
                        </view>
                        <view class="destination">{{ detailsInfo.line.end_title }}</view>
                    </view>
                    <view class="trips-info">
                        <view class="pay-state"><text class="price-unit">￥</text>{{
                            detailsInfo.line.unit_price }}</view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 预定座位信息 -->
        <view class="info-card">
            <view class="info-item" >
                <view class="info-label">手机号</view>
                <view class="info-value">

                    <input class="input" v-model="phone" placeholder="请输入" maxlength="11">
                    <image class="edit-contacts-icon" src="/static/home/safe-edit.png" @click.stop="changeIphone"></image>
                    </input>
                </view>
            </view>

            <view class="info-item" @click="showSeatPicker">
                <view class="info-label">座位数</view>
                <view class="info-value">{{ formData.seats }}座<image class="to-detail-icon"
                        src="/static/personalCenter/black-right.png" mode="aspectFill">
                    </image>
                </view>
            </view>

            <view class="info-item">
                <view class="info-label">上车点</view>
                <view class="info-value note-value">
                    <input class="input" v-model="formData.boarding_location" placeholder="示例：xxx地铁站B口" maxlength="11">
                </view>
            </view>
            <view class="info-item">
                <view class="info-label">优惠券</view>
                <view class="info-value" @click="confirmCoupons">-￥{{ currentCitem.amount || 0 }}<image
                        class="to-detail-icon" src="/static/personalCenter/black-right.png" mode="aspectFill">
                    </image>
                </view>
            </view>
            <view class="info-item">
                <view class="info-label">支付车主</view>
                <view class="info-value" style="color: #FF7937;">￥{{ syPrice }}
                </view>
            </view>
        </view>
        <!-- 操作按钮 -->
        <view class="action-buttons" @click="handleTakeOffTrip">
            <view class="action-btn publish">立即预定</view>
        </view>

        <!-- 底部协议信息 -->
        <view class="footer-agreement-warps">
            <image class="check-icon" :src="`/static/personalCenter/${checkName}.png`" mode="aspectFill"
                @click="handleCheck"></image>
            <text>已阅读并同意</text><text class="agreement-content" style=" color: #FF7937;"
                @click="confirmAgreement">《合乘协议》</text>
        </view>
        <!-- 温馨提示 -->
        <view class="tips-section">
            <view class="tips-text">温馨提示：</view>
            <view class="tips-text">1.请在上车后将座位费支付车主，平台不代收费用</view>
            <view class="tips-text">2.请按平台显示价格支付车主，若实际收费与平台显示价格不一致的请拨打客服电话举报</view>
        </view>

        <!-- 座位选择器 -->
        <u-picker :show="isShowSeats" :columns="[columnsSeats]" keyName="label" closeOnClickOverlay
            @confirm="confirmSeatsPicker" @cancel="closeSeatsPicker"></u-picker>
        <agreementPopup :showAgreement="showAgreement" @update:visible="updateVisible" code="riding_agreement" />
        <chooseCouponsPopup :showCouponsPopup="showCouponsPopup" :lineId='lineId'
            @update:visible="updateCouponsVisible" />
    </view>
</template>

<script>

import agreementPopup from '../../../common/carpooleAgreementPopup.vue'
import chooseCouponsPopup from '../../../common/chooseCouponsPopup.vue'
export default {
    components: { agreementPopup, chooseCouponsPopup },
    data() {
        return {
            isChecked: true,
            checkName: 'auth-gou', // auth-gou
            phone: "",
            showAgreement: false,
            showCouponsPopup: false,
            detailsInfo: null,
            lineId: "",
            isShowSeats: false,
            columnsSeats: [],
            formData: {
                "line_id": '', // 线路ID 必填
                "seats": 1, // 座位数 必填
                "boarding_location": "", // 上车点 必填
                "user_coupon_id": '' //  用户优惠券关联ID 非必填
            },
            currentCitem: {
                amount: 0
            },
            userInfo: {},
            syPrice: 0
        }
    },
    onLoad(option) {
        this.userInfo = uni.getStorageSync('userInfo')
        this.phone = this.userInfo.phone
        this.getData(option.lid)
        this.lineId = option.lid
        this.formData.line_id = option.lid
    },
    methods: {
        changeIphone() {
            uni.navigateTo({
                url: '/pages/personalCenter/account/modifyPhone',
            });
        },
        // 座位数相关
        closeSeatsPicker() {
            this.isShowSeats = false;
        },
        confirmSeatsPicker(e) {
            this.formData.seats = e.value[0].value;

            let am = this.currentCitem ? this.currentCitem.amount : 0
            this.syPrice = (this.detailsInfo.line.unit_price * this.formData.seats) - Number(am)
            this.closeSeatsPicker();
        },
        showSeatPicker() {
            this.isShowSeats = true;
        },
        async getData(id) {
            let url = `/h5/line/detail/${id}`
            try {
                const data = await this.$http.get(url)
                this.detailsInfo = data.data
                let cont = data.data.line.current_seats - data.data.line.on_order
                this.syPrice = (this.detailsInfo.line.unit_price * this.formData.seats)
                for (let index = 0; index < cont; index++) {
                    const element = `${index + 1}座`;
                    let obj = {
                        label: element,
                        value: index + 1
                    }
                    this.columnsSeats.push(obj)

                }
            } catch (error) {}
        },
        handleCheck() {
            this.isChecked = !this.isChecked
            this.checkName = this.isChecked ? 'auth-gou' : 'auth-quan'
        },
        updateCouponsVisible(status, data) {
            if (data) {
                this.formData.user_coupon_id = data.id
                this.currentCitem = data
                this.currentCitem.amount = Number(data.amount)
                this.syPrice = (this.detailsInfo.line.unit_price * this.formData.seats) - Number(data.amount)
            }
            this.showCouponsPopup = false
            // this.currentCitem = {}
        },
        updateVisible() {
            this.showAgreement = false
        },
        confirmAgreement() {
            this.showAgreement = true
        },
        confirmCoupons() {
            this.showCouponsPopup = true
        },
        async handlePublishTrip() {

            let params = {
                ...this.formData
            }
            try {
                const data = await this.$http.post("/h5/line/createOrder", params);
                uni.showModal({
                    title: '提示',
                    content: '预定成功',
                    showCancel: false,
                    confirmText: '确定',
                    success: (res) => {
                        if (res.confirm) {
							const URL = '/pages/personalCenter/trip/tripDetails?id='+data.data
                            // let URL = '/pages/home/queryOwners/index?sid=' + this.detailsInfo.line.start_id + '&eid=' + this.detailsInfo.line.end_id + '&sName=' + this.detailsInfo.line.start.name + '&eName=' + this.detailsInfo.line.end.name + '&type=' + this.detailsInfo.line.type
                            uni.navigateTo({ url: URL })
                        }
                    }
                })
            } catch (error) {}
        },
        handleTakeOffTrip() {
            if (!this.formData.seats) {
                uni.showToast({
                    title: '请选择座位数',
                    icon: 'none'
                })
                return
            }
            if (!this.formData.boarding_location) {
                uni.showToast({
                    title: '请输入上车点',
                    icon: 'none'
                })
                return
            }
            if (!this.isChecked) {
                uni.showToast({
                    title: '请阅读并同意合乘协议',
                    icon: 'none'
                })
                return
            }

            this.handlePublishTrip()
        },
        // 导航到指定页面
        navigateTo(url) {
            uni.navigateTo({
                url: url,
            });
        },
    }
}
</script>

<style scoped>
/* 行程头部样式 */
.trip-header {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 36rpx 0rpx 50rpx 20rpx;
    margin: 20rpx 26rpx;
}

.to-detail-icon {
    width: 28rpx;
    height: 28rpx;
}

.arrow-line-icon {
    width: 64rpx;
    height: 7rpx;
    margin: 0 18rpx;
}

.rotate-element {
    margin: 0;
    transform: rotate(90deg);
    /* 顺时针旋转45度 */
    transform-origin: center center;
    /* 旋转中心点，默认是元素中心 */
    position: absolute;
    bottom: 12rpx;
    left: -22rpx;
}

.route {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.route-left {
    display: flex;
    align-items: center;
}

.city {
    font-weight: 500;
    font-size: 32rpx;
    color: #0B1F20;
}

.owners-trip-item-detail {
    padding-top: 32rpx;
}

.owners-departure-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 40rpx;
}

.trip-location-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.time {
    font-weight: 500;
    font-size: 32rpx;
    color: #0B1F20;
    margin-bottom: 20rpx;
}

.time .start-label {
    display: inline-block;
    width: 88rpx;
    height: 40rpx;
    background: #FF7937;
    border-radius: 32rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 24rpx;
    color: #FFFFFF;
    line-height: 40rpx;
    text-align: center;
    margin-right: 12rpx;
}

.departure,
.destination {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 28rpx;
    color: #0B1F20;
    line-height: 42rpx;
    position: relative;
    padding-left: 36rpx;
}

.departure::before {
    content: "";
    position: absolute;
    bottom: 12rpx;
    left: 0;
    width: 16rpx;
    height: 16rpx;
    background: #00cfab;
    border-radius: 50%;
}

.destination::before {
    content: "";
    position: absolute;
    bottom: 12rpx;
    left: 0;
    width: 16rpx;
    height: 16rpx;
    background: #FF7937;
    border-radius: 50%;
}

.location,
.contact {
    font-size: 28rpx;
    color: #666;
    margin-top: 10rpx;
    margin-bottom: 12rpx;
    position: relative;
    padding-left: 34rpx;
}

.location .label,
.contact .label {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 24rpx;
    color: #666666;
    line-height: 36rpx;
}

.contact .value {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 32rpx;
    color: #FF7937;
    line-height: 48rpx;
}

.trips-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 40rpx;
}

.pay-state {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 700;
    font-size: 36rpx;
    color: #FF7937;
    line-height: 36rpx;
}

.price-unit {
    font-size: 24rpx;
    color: #FF7937;
}


.car-info {
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
    padding-bottom: 26rpx;
}

.car-model {
    padding-top: 22rpx;

}


.divider {
    height: 2rpx;
    background-color: #eee;
}

.car-type {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88rpx;
    height: 32rpx;
    border-radius: 4rpx;
    border: 1rpx solid rgba(255, 121, 55, 0.5);
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 20rpx;
    color: #FF7937;
    margin-left: 10rpx;
}

.car-icon {
    width: 19rpx;
    height: 16rpx;
    padding-right: 4rpx;
}

.driver-tel {
    padding-left: 104rpx;
}

.driver-label {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 24rpx;
    color: #999999;
    line-height: 28rpx;
    padding-left: 10rpx;
}

.info-card {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 0 40rpx;
    margin: 20rpx 26rpx 26rpx 20rpx;
}

.info-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 34rpx 0;
    border-bottom: 2rpx solid #eee;

}

.info-item:last-child {
    border-bottom: none;
}

.info-label {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 28rpx;
    color: #0B1F20;
    line-height: 28rpx;
}

.info-value {
    display: flex;
    align-items: center;
    justify-content: end;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 32rpx;
    color: #0B1F20;
    line-height: 28rpx;
}

.note-value {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 28rpx;
    color: #999999;
    line-height: 28rpx;
}

.info-value .input {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 32rpx;
    color: #0B1F20;
    line-height: 28rpx;
    text-align: right;
    display: inline-block;
}

.edit-contacts-icon {
    width: 32rpx;
    height: 32rpx;
    padding-left: 14rpx;
}

.to-detail-icon {
    width: 28rpx;
    height: 28rpx;
}

.update-btn {
    background: linear-gradient(90deg, #ff3f39 0%, #ff7937 100%);
    color: #fff;
    border-radius: 16rpx;
    font-weight: 500;
    font-size: 36rpx;
    height: 100rpx;
    line-height: 100rpx;
    margin-bottom: 20rpx;
}

.tips {
    padding: 0 34rpx;
}



.tips-content {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 24rpx;
    color: #999999;
    line-height: 48rpx;

}

/* 操作按钮样式 */
.action-buttons {
    display: flex;
    justify-content: space-between;
    margin: 20rpx 26rpx;
}

.action-btn {
    flex: 1;
    text-align: center;
    padding: 26rpx 0;
    border-radius: 16rpx;
}

.share {
    background-color: #fff;
    color: #666666;

}

.cancel {
    background: linear-gradient(90deg, #FF3F39 0%, #FF7937 100%);
    color: #fff;
    margin-left: 20rpx;
}

.publish {
    background: linear-gradient(90deg, #FF3F39 0%, #FF7937 100%);
    color: #fff;
}

.share-icon {
    width: 28rpx;
    height: 28rpx;
    margin-right: 16rpx;
}

.footer-agreement-warps {
    display: flex;
    align-items: center;
    padding-left: 40rpx;
}

.check-icon {
    width: 40rpx;
    height: 40rpx;
    margin-right: 20rpx;
}

.footer-agreement-warps text {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 28rpx;
    color: #0B1F20;
    line-height: 54rpx;
}

/* 温馨提示样式 */
.tips-section {
    padding: 20rpx 26rpx;
}


.tips-text {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 24rpx;
    color: #999999;
    line-height: 48rpx;
}

.input-placeholder {
    font-weight: 400;
    font-size: 28rpx;
    color: #999999;
}
</style>